import { Component } from "react";
import propTypes from "prop-types";

class Todo extends Component {
    constructor(props) {
        super(props);
    }
    render() {
        const { id, content, completed } = this.props;
        return (
            <li className='list-group-item'>
                <div className='input-group'>
                    <span className='input-group-addon'>
                        <input
                            type='checkbox'
                            checked={completed}
                            onChange={() => this.props.toggleTodo(id)}
                        />
                    </span>
                    <input
                        type='text'
                        className='form-control'
                        value={content}
                        disabled
                    />
                    <span className='input-group-btn'>
                        <button
                            className='btn btn-danger'
                            type='button'
                            onClick={() => this.props.deleteTodo(id)}
                        >
                            删除
                        </button>
                    </span>
                </div>
            </li>
        );
    }
}

class Blank extends Component {
    constructor(props) {
        super(props);
    }
    render() {
        return (
            <div className='alert alert-info' style={{ marginTop: 20 }}>
                暂时没有任何代办事项
            </div>
        );
    }
}

class List extends Component {
    constructor(props) {
        super(props);
    }
    static propTypes = {
        todos: propTypes.array.isRequired,
        deleteTodo: propTypes.func.isRequired,
        toggleTodo: propTypes.func.isRequired,
    };
    render() {
        const { todos } = this.props;
        return (
            <>
                {todos.length === 0 && <Blank />}
                {todos.length > 0 && (
                    <ul className='list-group' style={{ marginTop: 20 }}>
                        {todos.map((todo) => (
                            <Todo
                                key={todo.id}
                                {...todo}
                                toggleTodo={this.props.toggleTodo}
                                deleteTodo={this.props.deleteTodo}
                            />
                        ))}
                    </ul>
                )}
            </>
        );
    }
}

export default List;
